<template>
    <div>

        <el-form :inline="true" :model="search">
            <el-form-item label="菜单名称:">
                <el-input prefix-icon="el-icon-search" v-model="search.name" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" size="default" @click="selectType.visible = true">新增</el-button>

        <el-dialog title="开始" :visible.sync="selectType.visible" width="30%">
            请选择流程：
            <el-select v-model="selectType.code" placeholder="请选择发起的流程" clearable filterable>
                <el-option v-for="item in selectType.types" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>


            <span slot="footer">
                <el-button @click="selectType.visible = false">取 消</el-button>
                <el-button type="primary" @click="makeSureType" :disabled="selectType.loading"
                    :loading="selectType.loading">确
                    定</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="isRestart ? '重新发起' : '发起流程'" :visible.sync="flowVisible" width="40%" :destroy-on-close='true'>
            <div class="rebackRemark" v-if="isRestart">
                <p>退回人：{{ rebackUser }}</p>
                <p>备注：{{ rebackRemark }}</p>
            </div>
            <el-form label-width="80px" :inline="false" size="normal">
                <el-form-item :label="item.name" v-for="item in formItems" :key="item.name">
                    <!-- 输入框 -->
                    <el-input placeholder="" v-model="item.value" size="normal" v-if="item.type == '0'"></el-input>

                    <!-- 多行文本 -->
                    <el-input placeholder="" v-model="item.value" size="normal" type="textarea" v-if="item.type == '1'"
                        :autosize="{ minRows: 4 }"></el-input>

                    <!-- 下拉 -->
                    <dicSelect v-if="item.type == '2'" v-model="item.value" :typeCode="item.url" placeholder="请选择"
                        :single="item.many + ''"></dicSelect>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="flowVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit" :loading="submitLoading">{{ isRestart ? "重新发起" : "提 交" }}</el-button>
            </span>
        </el-dialog>

        <el-table :data="tableData" border stripe style="margin-top: 20px;">
            <el-table-column prop="level" label="流程等级" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level == '1'">普通</el-tag>
                    <el-tag type="danger" v-if="scope.row.level == '2'">紧急</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.result == '0'" type="success">进行中</el-tag>
                    <el-tag type="info" v-if="scope.row.result == '1'">已结束</el-tag>
                    <el-tag type="danger" v-if="scope.row.result == '2'">已退回</el-tag>
                    <el-tag type="warning" v-if="scope.row.result == '3'">已撤回</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="currentNode" label="当前节点" width="100">
            </el-table-column>

            <el-table-column prop="name" label="流程名称">
            </el-table-column>

            <el-table-column prop="type" label="流程类型">
            </el-table-column>

            <el-table-column prop="initiator" label="发起人">
            </el-table-column>

            <el-table-column prop="initTime" label="发起时间">
            </el-table-column>

            <el-table-column label="操作" width="500">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-edit" @click="detail(scope.row)">查看</el-button>
                    <el-popconfirm style="margin-left: 10px;" title="是否确认撤回，该操作不可逆？" confirmButtonText="确认"
                        cancelButtonText="取消" confirmButtonType="danger" cancelButtonType="text"
                        @confirm="withDrawHandle(scope.row)">
                        <el-button slot="reference" size="mini" type="danger" plain
                            icon="el-icon-refresh-right">撤回</el-button>
                    </el-popconfirm>
                    <el-button size="mini" style="margin-left: 10px;" type="success" plain icon="el-icon-refresh-left"
                        v-if="scope.row.result == '2'" @click="reStart(scope.row)">重新发起</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="center"
            :current-page="search.pageNum" :page-sizes="[10, 30, 50, 100]" :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>

        <flowDetail v-model="detailVisible" v-if="detailVisible" :workFlowId="currentFlowId" :status="currentFlowStatus">
        </flowDetail>
    </div>
</template>

<script>
import { getTemplateSelectList, getFormItems } from "@/api/workFlowTemplate/workFlowTemplate";
import dicSelect from '@/components/dicSelectSingle.vue'
import { startWorkFlow, getPageList, getFormItems as getValueFormItems, reStart } from "@/api/workFlow/workFlow";
import flowDetail from "@/components/workFlow/workFlowDetail.vue"

export default {
    components: { dicSelect, flowDetail },
    async created() {
        this.loadData()

        let result = await getTemplateSelectList()
        if (result.code == 10000) {
            this.selectType.types = result.data
        } else {
            this.$message({
                type: 'error',
                message: '加载流程错误' + result.msg
            })
        }

    },
    data() {
        return {
            selectType: {
                visible: false,
                code: '',
                types: [],
                loading: false
            },
            flowVisible: false,
            formItems: [],
            submitLoading: false,
            tableData: [],
            search: {
                name: '',
                pageSize: 10,
                pageNum: 1,
            },
            totalCount: 0,
            detailVisible: false,
            currentFlowId: '',
            currentFlowStatus: true,
            isRestart: false,
            restartFlowId:'',
            rebackUser: '',
            rebackRemark: ''
        }
    },
    methods: {
        async loadData() {
            let res = await getPageList(this.search)
            if (res.code == 10000) {
                this.tableData = res.data.data
                this.totalCount = res.data.count
            }
        },
        async makeSureType() {
            this.selectType.loading = true

            let res = await getFormItems(this.selectType.code)
            if (res.code == 10000) {
                this.formItems = res.data
                this.selectType.visible = false
                this.flowVisible = true
            }
            else {
                this.$message({
                    type: 'error',
                    message: '获取流程表单失败！' + res.msg
                })
            }
            this.selectType.loading = false
        },
        async submit() {
            this.submitLoading = true
            if (this.isRestart) {
                let data = {
                    templateId: this.restartFlowId,
                    formItems: this.formItems
                }
                let res = await reStart(data)
                if (res.code == 10000) {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.loadData()
                    this.flowVisible = false
                }
            } else {
                let data = {
                    templateId: this.selectType.code,
                    formItems: this.formItems
                }
                let res = await startWorkFlow(data)
                if (res.code == 10000) {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.loadData()
                    this.flowVisible = false
                }
            }
            this.submitLoading = false
        },
        handleSizeChange(size) {
            this.search.pageSize = size
            this.loadData()
        },
        handleCurrentChange(num) {
            this.search.pageNum = num
            this.loadData()
        },
        withDrawHandle(row) {
            console.log(row);
        },
        detail(row) {
            this.currentFlowId = row.id
            this.currentFlowStatus = row.result == '0'
            this.detailVisible = true
        },
        async reStart(row) {
            let res = await getValueFormItems(row.id)
            if (res.code == 10000) {
                this.restartFlowId = row.id
                this.formItems = res.data
                this.isRestart = true
                this.flowVisible = true
                this.rebackRemark = row.rebackRemark
                this.rebackUser = row.rebackUserName
            }
        }
    }
}
</script>

<style scoped>
.rebackRemark {
    margin-left: 40px;
    margin-bottom: 30px;
}
</style>

